<template>
	<view>
		<nav-bar title="申请售后"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="info_box">
			<view><image :src="goodsInfo.goodsImg" mode="aspectFill"></image></view>
			<view>
				<view class="name">{{ goodsInfo.goodsName || "" }}</view>
				<view class="size">
					<text>{{ goodsInfo.goodsSpecName || "" }}</text>
					<text>{{ goodsInfo.goodsSpecPrice || "" }}</text>
				</view>
				<view class="num">x{{ goodsInfo.goodsNum || "" }}</view>
			</view>
		</view>
		<view class="after_sale_info">
			<view class="refund_box">
				<view class="title"><view>退款金额</view></view>
				<view class="input_box">
					<input type="number" v-model="refundMoney" />
					<text>最多可退款￥{{ goodsInfo.goodsSpecPrice || 0 }}</text>
				</view>
			</view>
			<view class="remark_box">
				<view class="title"><view>退款备注</view></view>
				<view class="txt"><textarea type="text" v-model="refundDesc" placeholder="请详细描述您售后的原因，上传图片有助于商家审核售后哦~" maxlength="255"></textarea></view>
			</view>
			<view class="picture_box">
				<view class="tip">图片</view>
				<view class="upload_box">
					<view class="upload_img" v-for="(item, index) in imgs" :key="index">
						<image mode="aspectFill" :src="item"></image>
						<text class="delete" @click="onDelete(index)"></text>
					</view>
					<view class="upload_but" v-if="imgs.length < 6" @click="onImgsUpload()">
						<image src="https://qn.kemean.cn/upload/201908/05/d68df2873cd04f18a70104e340a14884" mode="aspectFill"></image>
					</view>
				</view>
				<view class="warn">注：平台售后服务仅支持退货退款，如果有其他情况请联系商家 或者平台客服进行处理</view>
			</view>
			<view class="btn_box"><button @click="onSubmit">提交</button></view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			orderNo: '',
			goodsId: '',
			goodsSpecId: '',
			// 退款金额
			refundMoney: '',
			// 备注
			refundDesc: '',
			// 上传图片数组
			imgs: [],
			goodsInfo: {}
		};
	},
	//第一次加载
	onLoad(e) {
		if (e.orderNo) {
			this.orderNo = e.orderNo;
			this.goodsId = e.goodsId;
			this.goodsSpecId = e.goodsSpecId;
		}
		this.loadData();
	},
	//页面显示
	onShow() {},
	watch:{
		refundMoney(val){
			if(val){
				if(val > this.goodsInfo.goodsSpecPrice){
					this.refundMoney = this.goodsInfo.goodsSpecPrice;
				}
			}
		}
	},
	//方法
	methods: {
		// 获取数据
		loadData() {
			this.$http.get('api/order/v1/after_sale_mall_goods', { orderNo: this.orderNo, goodsId: this.goodsId, goodsSpecId: this.goodsSpecId }).then(data => {
				this.goodsInfo = data;
			});
		},
		//上传图片
		onImgsUpload() {
			let count = 6 - this.imgs.length;
			this.$http.qnImgUpload({ count: count }).then(res => {
				this.imgs = this.imgs.concat(res);
			});
		},
		// 删除照片

		onDelete(index) {
			this.imgs.splice(index, 1);

		},
		//提交
		onSubmit() {
			if (this.refundMoney == '') {
				uni.showToast({
					title: '请输入退款金额',
					icon: 'none'
				});
				return;
			}
			if (this.refundDesc == '') {
				uni.showToast({
					title: '请输入退款原因',
					icon: 'none'
				});
				return;
			}
			let httpData = {

				orderNo: this.orderNo,
				refundDesc: this.refundDesc
			};
			if (this.refundMoney) {

				httpData.refundMoney = this.refundMoney;
			}
			if (this.imgs) {
				httpData.imgRecord = this.imgs;
			}

			if (this.goodsId) {
				httpData.goodsId = this.goodsId;
			}
			if (this.goodsSpecId) {
				httpData.goodsSpecId = this.goodsSpecId;
			}
			this.$http.post('api/order/v1/after_sale_mall', httpData).then(res => {
				uni.showModal({
					title: '提示',
					content: '申请成功！',
					showCancel: false,
					success: res => {
						uni.navigateBack();
					}
				});
			});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.$base.share();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.info_box {
	border-top: solid 1upx #e5e5e5;
	padding: 30upx;
	background-color: #ffffff;
	display: flex;
	> view {
		&:nth-of-type(1) {
			> image {
				width: 120upx;
				height: 120upx;
			}
		}
		&:nth-of-type(2) {
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			width: 100%;
			margin-left: 30upx;
			.name {
				font-size: 28upx;
				color: #333333;
			}
			.size {
				display: flex;
				justify-content: space-between;
				align-items: center;
				> text {
					&:nth-of-type(1) {
						font-size: 24upx;
						color: #999999;
					}
					&:nth-of-type(2) {
						font-size: 28upx;
						color: #333333;
					}
				}
			}
			.num {
				font-size: 24upx;
				color: #333333;
			}
		}
	}
}
.after_sale_info {
	margin-top: 20upx;
	background-color: #ffffff;
	padding: 30upx;
	.title {
		flex-shrink: 0;
		display: flex;
		font-size: 28upx;
		color: #333333;
		&::before {
			content: '*';
			font-size: 28upx;
			color: #ff5527;
		}
	}
	.refund_box {
		display: flex;

		.input_box {
			width: 100%;
			margin-left: 30upx;
			> input {
				width: 100%;
				height: 88upx;
				padding: 0 30upx;
				vertical-align: middle;
				border-radius: 6upx 0px 0px 0px;
				border: solid 1upx #e5e5e5;
				font-size: 28upx;
				color: #333333;
			}
			> text {
				font-size: 24upx;
				color: #ff5527;
			}
		}
	}
	.remark_box {
		margin-top: 10upx;
		.txt {
			margin-top: 30upx;
			// width: 100%;
			height: 200upx;
			border-radius: 6px 0px 0px 0px;
			border: solid 1px #e5e5e5;
			padding: 30upx 20upx 30upx 25upx;
			> textarea {
				width: 100%;
				font-size: 24upx;
				color: #333333;
				&::placeholder {
					font-size: 24upx;
					color: #999999;
				}
			}
		}
	}
	.picture_box {
		margin-top: 40upx;
		.tip {
			font-size: 28upx;
			color: #333333;
		}
		.upload_box {
			display: flex;
			flex-wrap: wrap;
			.upload_img {
				position: relative;
				margin-right: 30upx;
				margin-top: 20upx;
				border-radius: 10upx;
				image {
					width: 120upx;
					height: 120upx;
				}
				text {
					position: absolute;
					top: 0upx;
					right: 0upx;
					width: 40upx;
					height: 40upx;
					@include bis('https://qn.kemean.cn/upload/201908/05/df40b98b77fc4c42a5e0327c62975e29', 100% 100%);
				}
			}
			.upload_but {
				margin-top: 20upx;
				width: 120upx;
				height: 120upx;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 3upx dashed #cccccc;
				font-size: 80upx;
				line-height: 77upx;
				color: #cccccc;
				border-radius: 10upx;
				color: #cccccc;
				font-size: 100upx;
				padding: 24upx 21upx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.warn {
			margin-top: 60upx;
			font-size: 24upx;
			color: #999999;
		}
	}
	.btn_box {
		height: 130upx;
		button {
			position: fixed;
			left: 30upx;
			right: 30upx;
			bottom: 30upx;
			background-image: linear-gradient(-90deg, #ffac29 0%, #ff7418 100%), linear-gradient(#5a61f9, #5a61f9);
			border-radius: 6upx;
			height: 80upx;
			line-height: 80upx;
			font-size: 32upx;
			color: #ffffff;
		}
	}
}
</style>
